<template>
    <div class="conter">
        <div style="text-align: center;font-size: 32px;color: #333333">{{details.cuHeritageTitle}}</div>
        <div class="conter" style="width: 100%" v-if="details.cuHeritageType==0" v-html="details.cuHeritageContent"></div>
        <div class="conter" style="width: 100%" v-if="details.cuHeritageType==1" >
            <video :src="details.cuHeritageContent" controls="controls"></video>
        </div>
        <div class="conter" style="width: 100%">
            <el-image :src="details.cuHeritageImg"></el-image>
        </div>
    </div>
</template>

<script>
    export default {
        name: "heritage",
        data() {
            return {
                details: {}
            }
        },
        methods: {
            queryDetails() {
                this.$axios.post("cu-heritage/queryDetails", {cuHeritageId: this.$route.params.code}).then((response) => {
                    if (response.data.code === 0) {
                        this.details = response.data.data;
                    }
                })
            }
        },
        mounted() {
            this.queryDetails();
        }
    }
</script>

<style scoped>

</style>
<style>
    .conter img{
        max-width: 100%;
    }

    .conter video{
        max-width: 100%;
    }
</style>